<template>
    <el-select v-model="partitionId" filterable :style="{width: width}" @change="change" clearable>
        <el-option v-for="item in partitions" :key="item.value" :label="item.name" :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
import Vue from "vue";
import { getPartitionSelection } from "@/api/dicts/partition";

export default {
    name: "partition-selection",
    data() {
        return {
            fetching: false,
            partitions: []
        };
    },
    props: {
        placeholder: { type: String, default: "请选择分区" },
        partitionId: { type: String },
        width: { type: String, default: "100%" }
    },
    model: { prop: "partitionId", event: "change" },
    methods: {
        fetch: function() {
            this.fetching = true;
            var vm = this;
            getPartitionSelection()
                .then(function(partitions) {
                    vm.fetching = false;
                    vm.partitions = partitions;
                })
                .catch(() => {
                    vm.fetching = false;
                });
        },
        change: function() {
            this.$emit("change", this.partitionId);
        }
    },
    created() {
        this.fetch();
    }
};
</script>
